<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input clearable type="number" v-model.trim="form.phone" placeholder="请输入"
                            oninput="if(value.length > 11) value=value.slice(0, 11)"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--需要注意的地方 :http-request这个要想使用 auto-upload必须声明为true; 在执行 diyUpImg的时候 可以使用file-list 绑定的数组来控制页面上的图片展示
                        ；不完善的：（其实哪怕请求上传接口失败；也有会图片；这个我到现在不知道怎么解决；只能通过强行删除 file-list绑定的数组来实现上传失败图片不展示的功能）-->
                    <el-form-item label="现场图片(选填)">
                        <el-upload action="" :http-request="diyUpImg" :file-list="fileListImg" list-type="picture-card"
                            :auto-upload="true" accept=".jpg, .png, .jpeg" :limit="5">
                            <i slot="default" class="el-icon-plus"></i>
                            <!-- 使用插槽 实现自己想要的效果 -->
                            <div slot="file" slot-scope="{file}">
                                <!-- 展示图片 -->
                                <img class="show_img" :src="file.url" :alt="file.name">
                                <!-- 放大 和 删除 -->
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span class="el-upload-list__item-delete" @click="handleRemove(file, 'fileListImg')">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="fileListImgVisible" append-to-body>
                            <img width="100%" :src="onceImg" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'ElementComponetsQuestionUpimage',

    data() {
        return {
            dialogVisible: false,
            form: {
                phone: "",
            },
            rules: {
                phone: [
                    { required: true, message: "请输入手机号", trigger: "blur" },
                ]
            },
            // 图片上传
            fileListImg: [],
            onceImg: "",
            fileListImgVisible: false,
        };
    },

    mounted() {

    },

    methods: {
        closeEventAlert() {
            this.dialogVisible = false;
        },
        // 自定义上传事件
        diyUpImg(e) {
            const formData = new FormData();
            formData.append("file", e.file);

            const instance = axios.create({
                baseURL: 'https://zbwg.nuoyashop.com/wg/api/information',
                // 在这里添加你的自定义headers
                headers: {
                    'token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2OTAwMTkwNTUsImFjY291bnQiOiJ7XCJsb2dpbklkXCI6XCJhZG1pblwiLFwiYWRkVGltZVwiOlwiMjAyMi0wMy0yMiAxMDoyNjowMVwiLFwicm9sZUlkXCI6OTk5OTksXCJhZGRVc2VyXCI6XCLmtYvor5XotKblj7fmt7vliqBcIixcInR5cGVcIjowLFwiZGVsRmxnXCI6MCxcInJvbGVfbmFtZVwiOlwi6LaF57qn566h55CG5ZGYXCIsXCJsYXN0TG9naW5UaW1lXCI6XCIyMDIyLTA4LTIyIDEwOjM3OjU4XCIsXCJ1cGRVc2VyXCI6XCJhZG1pblwiLFwicGhvbmVcIjpcIjE1MDEyMzQ0MTIzXCIsXCJ1cGRUaW1lXCI6XCIyMDIzLTAzLTE2IDE2OjA3OjE5XCIsXCJuYW1lXCI6XCJhZG1pblwiLFwiaWRcIjozMyxcInBvc2l0aW9uXCI6bnVsbCxcInN0YWZmSWRcIjoxLFwic3RhdHVzXCI6MH0ifQ.FG9NObz8iiaSROtwu4pLv23cFLfYrCViZbJltF-FqOc', // 例如添加一个Authorization头部
                },
            });

            instance.post('/postFile', formData)
                .then(response => {
                    if (response.data.status == '0000') {
                        this.fileListImg.push({
                            name: e.file.name,
                            url: response.data.msgUrl,
                        });
                    } else {
                        // 请求失败，移除上传的图片
                        this.fileListImg = this.fileListImg.filter(item => item.uid !== e.file.uid);
                        console.error('上传图片失败:', response.data.msg);
                    }
                })
                .catch(error => {
                    console.error('请求失败', error);
                    // 请求失败，移除上传的图片
                    this.fileListImg = this.fileListImg.filter(item => item.uid !== e.file.uid);

                });
        },
        // 查看具体图片
        handlePictureCardPreview(file) {
            this.fileListImgVisible = true;
            this.onceImg = file.url;
        },
        // 删除图片
        handleRemove(e, name) {
            this[name] = this[name].filter(item => {
                return item.uid !== e.uid
            });
        },
    },
};
</script>
